<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="shopping">
    <meta name="description" content="shopping">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>shopping</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/personal.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
    <!-- 公共头部 -->
    <div class="contentHead">
        <div class="head">
            <div class="iconfont">
                <a href="#" class="icon pd-x_user"></a>
                <a href="#" class="icon pd-x_qrcode"></a>
                <a href="#" class="icon pd-x_phone"></a>
                <a href="#" class="icon pd-x_help"></a>
            </div>
            <div class="tel">
                <span class="icon pd-x_service"></span>
                <span class="server">服务热线</span>
                <span class="phone">400-1234-5678</span>
            </div>
        </div>
    </div>
    <!-- 头部搜索 -->
    <div class="search">
        <div class="logo">
            <img src="./images/logarea.png" alt="">
        </div>
        <div class="searchinfo">
            <div class="searchbox">
                <p>全部分类</p>
                <div class="line"></div>
                <input type="text" name="" id="" placeholder="搜索商品">
                <div class="right">
                    <span class="icon pd-search_line"></span>
                    <span class="sousuo">搜索</span>
                </div>
            </div>
        </div>
        <div class="myshop">
            <div class="bg">
                <span class="icon pd-x_cart"></span>
            </div>
            <div class="my">
                <p class="shop">我的购物车
                    <span class="icon pd-baseicons82"></span>
                </p>
                <p class="pirce">￥ 0.00</p>
            </div>
        </div>
    </div>
    <!-- nav -->
    <div class="navT">
        <div class="nav">
            <img src="./images/nav1.png" alt="">
            <div class="navAll">
                <a href="#" style="padding-left: 72px" class="active">首页</a>
                <a href="#">限时秒杀</a>
                <a href="#">商品促销</a>
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
            </div>
        </div>
    </div>

    <!-- 内容 -->
    <div class="cont">
        <!-- 左边头像个人导航 -->
        <div class="personal">
            <div class="personalTop">
                <img src="./images/head.png" alt="">
                <p class="welcome">欢迎回来，</p>
                <p class="name">牛小叉</p>
            </div>
            <div class="personalBottom">
                <ul>
                    <li style="padding-top: 0" class="active">
                        <span class="line"></span>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">会员中心</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">个人资料</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">账户安全</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">收货地址</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">账户余额</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">提现记录 </a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的优惠券</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的积分</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">退款/退货及维修</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">商品评价/晒单</a>
                    </li>
                    <li>
                        <span class="icon pd-member_solid"></span>
                        <a href="#">商品收藏</a>
                    </li>
                </ul>
            </div>

        </div>
        <!-- 右边具体内容 -->
        <div class="personal center">
            <div class="personalHead">
                <div class="head">
                    <img src="./images/head1.png" id="myPic" alt="">
                </div>
                <div class="file">
                    <!-- <button id="file" style="cursor: pointer;">上传照片</button> -->
                    <input type="button" id="file" value="上传照片" onclick="myFile.click()" />
                    <input type="file" hidden id="myFile" />
                    <p>完善个人信息资料，上传头像图片有助于您结识更多的朋友。 头像最佳默认尺寸为120x120像素。</p>
                </div>
            </div>
            <form action="" class="msg">
                <div>
                    <span class="must">*</span>
                    <span>昵称</span>
                    <input type="text">
                </div>
                <div>
                    <span class="must">*</span>
                    <span>真实姓名</span>
                    <input type="text">
                </div>
                <div>
                    <span class="padding">出生日期</span>
                    <input type="text">
                </div>
                <div>
                    <span class="padding">性别</span>
                    <input type="radio" name="sex" class="sex" value="">男 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="sex" class="sex" value="">女 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" name="sex" class="sex" value="">未知
                </div>
                <div>
                    <span class="padding">所在地</span>
                    <select name="" id="">
                        <option value="">选择市</option>
                    </select>
                    <select name="" id="">
                        <option value="">选择区</option>
                    </select>
                    <select name="" id="">
                        <option value="">选择县</option>
                    </select>
                </div>
                <div>
                    <span class="padding">QQ</span>
                    <input type="text">
                </div>
                <input type="submit" value="确认修改" class="submit">
            </form>
        </div>
    </div>
    </div>
    <!-- 正品保障 -->
    <div class="real">
        <div class="realThing">
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
            <div class="realThingCont">
                <span class="icon pd-real_solid"></span>
                <span>正品保障</span>
            </div>
        </div>
    </div>
    <!-- 公共底部 -->
    <div class="footer">
        <div class="footerTop">
            <div>
                <img src="./images/LOGO.png" alt="">
            </div>
            <div class="">
                <dl>
                    <dt>配送与支付</dt>
                    <dd>货到付款区域</dd>
                    <dd>配送支付智能查询</dd>
                    <dd>支付方式说明</dd>
                </dl>
            </div>
            <div class="">
                <dl>
                    <dt>服务保证</dt>
                    <dd>退换货原则</dd>
                    <dd>售后服务保证</dd>
                    <dd>产品质量保证</dd>
                </dl>
            </div>
            <div class="">
                <dl>
                    <dt>联系我们</dt>
                    <dd>网站故障报告</dd>
                    <dd>选机咨询</dd>
                    <dd>投诉与建议</dd>
                </dl>
            </div>
            <div class="fuwu">
                <dl>
                    <dt>服务热线</dt>
                    <dd>400-023-4567</dd>
                </dl>
            </div>
        </div>
        <div class="line"></div>
        <div class="footerBottom">
            <p>© 2018 WWW.SHOPPING.COM</p>
        </div>
    </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
<script>
    //获取图片路劲的方法，兼容多种浏览器，通过createObjectURL实现
    function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) {
            url = window.createObjectURL(file); //basic
        } else if (window.URL != undefined) {
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) {
            url = window.webkitURL.createObjectURL(file);
        }

        return url;
    }

    //实现功能代码
    $(function () {
        $("#myFile").change(function () {
            // var path = browerfile.value;
            var objUrl = getObjectURL(this.files[0]);
            // console.log(this.files)
            if (objUrl) {
                $('#myPic').attr("src", objUrl);
            }
        })
    })
</script>

</html>